.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
body{
    background: #eeeeee;
    .header{
        width: 100%;
        .px2rem(height, 100);
        background: #2d8ff4;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left:0;
        top:0;
        color: #ffffff;
        .px2rem(font-size, 30);
        .left{
            margin-left:5%;
        }
        .center{
            .px2rem(font-size, 40);
        }
        .right{
            margin-right: 5%;
            .px2rem(font-size, 60);
        }
    }
    .login{
        .px2rem(height, 436);
        width:100%;
        background: #2d8ff4;
        img{
            .px2rem(width, 130);
            .px2rem(height, 130);
            .px2rem(margin-top, 130);
            margin-left:42%;
            border-radius: 50%;
        }
        p{
            text-align: center;
            color: #ffffff;
            .px2rem(font-size, 38);
            .px2rem(line-height, 58);
            span{
                border-right:3px solid #ffffff;
                .px2rem(padding-right, 10);
                .px2rem(margin-right, 10);
            }
        }
    }
    .nav{
        width: 100%;
        .px2rem(height, 160);
        background: #ffffff;
        display: flex;
        .time{
            width:20%;
            text-align: center;
            .iconfont{
                .px2rem(font-size, 60); 
                color: #333333;
                .px2rem(margin-top, 40);
            }
            dd{
                color: #333333;
                .px2rem(margin-top, 6);
            }
        }
        .dl{
            .px2rem(width, 94);
            .px2rem(height, 94);
            background: #2d8ff4;
            border-radius: 50%;
            .px2rem(margin-top, 10);
        }
    }
    .main{
        width: 100%;
        .px2rem(margin-top, 16);
        background: #ffffff;
        p{
            .px2rem(height, 96);
            border-bottom: 1px solid #eeeeee;
            display: flex;
            align-items: center;
            justify-content:space-between;
            .iconfont{
                .px2rem(font-size, 48);
            }
            .left{
                margin-left:5%;
                .px2rem(margin-right, 30);
                span{
                    .px2rem(font-size, 30);
                    .px2rem(margin-left, 20);
                }
            }
            .right{
                margin-right:5%;
            }
        }
    }
    .last{
        .px2rem(margin-bottom, 130);
    }
    .footer{
        width:100%;
        .px2rem(height, 112);
        background: #ffffff;
        position: fixed;
        left:0;
        bottom: 0;
        z-index: 99;
        display: flex;
        .time{
            width:20%;
            text-align: center;
            .iconfont{
                .px2rem(font-size, 60); 
                color: #a49191;
                .px2rem(margin-top, 10);
            }
            dd{
                color: #9e9191;
                .px2rem(margin-top, 6);
            }
        }
        .dl{
            .px2rem(width, 94);
            .px2rem(height, 94);
            background: #2d8ff4;
            border-radius: 50%;
            .px2rem(margin-top, 10);
            .dt{
                .px2rem(padding-top, 10);
                color: #ffffff;
            }
        }
    }
}
